<template>
  <el-card header="我的待审核">
    <div class="tree-box">
      <MForm :fields="fields" :modelValue="modelValue" @submit="search" @cancel="search">
      </MForm>
      <!-- <div class="btns">
        <div>
          <el-button type="primary" :icon="Operation" @click="exportHtmlToWord">批量审核</el-button>
          <el-button type="warning" :icon="Download" @click="exportHtmlToWord">导出</el-button>
        </div>
      </div> -->
      <el-table :data="tableData" border style="width: 100%" height="550">
        <el-table-column type="selection" width="55" />
        <el-table-column label="组织名称" prop="organizationBaseName" :show-overflow-tooltip="true" width="200"
          align="center" />

        <el-table-column label="组织代码" prop="creditCode" align="center" width="200" />
        <el-table-column label="业务主管单位" prop="supervisoryUnit" :show-overflow-tooltip="true" width="250"
          align="center" />
        <!-- <el-table-column label="法定代表人/负责人" prop="legalRepresentativeName" :show-overflow-tooltip="true" width="200"
          align="center" /> -->
        <el-table-column label="组织类别" prop="organizationType" width="110" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.organizationType == 1 ? 'warning' : ''">
              <span class="tag">{{
                scope.row.organizationType == 1 ? '社团' : '民非'
              }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核进度"  header-align="center" width="500">
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              <div style=" display: flex; align-items: center">
                <template v-for="item in scope.row.approveList">
                  <span :class="['check-step', { 'no-check': item.approveStatus == 0 }]">{{
                    item.approveDescription }}</span>
                  <el-icon>
                    <Right />
                  </el-icon>
                </template>
              </div>
              <el-button size="mini" type="text" @click="handleWatch(scope.row)" style="margin-left: 10px">详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="createdTs" :show-overflow-tooltip="true" width="170" align="center" />
        <el-table-column label="办结进展" prop="timeOutDe" :show-overflow-tooltip="true" width="200" align="center">
          <template #default="scope" width="200">
            <el-tag v-if="scope.row.timeOutDe" type="danger">办结超时</el-tag>
            <el-tag v-else type="success">办结时间内</el-tag>
            {{ scope.row.timeOutDe ? `超时${scope.row.timeOutDe}` : '' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
          <template #default="scope">
            <el-button size="mini" type="text" :icon="Stamp" v-if="scope.row.approveLevel == 2"
              @click="assignOperator(scope.row)">指派经办人</el-button>
            <el-button v-else size="mini" type="text" :icon="Stamp" @click="handleCheck(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageInfo-box">
        <el-pagination v-model:current-page="params.pageNum" :page-sizes="[100, 200, 300, 400]" background
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-card>
  <el-dialog v-model="dialogCheckVisible" title="年检审核" width="95%" top="3vh">
    <checkST @openResult="checkSubmit" @openOpinion="openCheckOpinion" v-if="isSt" :currentRow="chooseRow" :key="checkKey">
    </checkST>
    <checkMF v-else @openResult="checkSubmit" @openOpinion="openCheckOpinion" :currentRow="chooseRow" :key="checkKey2">
    </checkMF>
  </el-dialog>
  <!-- 分配组织数据权限对话框 -->
  <el-dialog title="审核进度" v-model="openPress" width="600px" append-to-body destroy-on-close top="5vh">
    <checkStep :currentRow="chooseRow"></checkStep>
  </el-dialog>
  <el-dialog title="审核意见" v-model="dialogResultOpinionVisible" width="600px" top="4vh" append-to-body>
    <checkOpinion @close="closeRes" @saveSuccess="saveSuccess" :currentRow="chooseRow">
    </checkOpinion>
  </el-dialog>
  <el-dialog title="审核事项确认" v-model="dialogResultVisible" width="1200px" top="4vh" append-to-body destroy-on-close>
    <result @close="closeRes" @saveSuccess="saveSuccess" :currentRow="chooseRow"></result>
  </el-dialog>
  <el-dialog title="选择经办人" v-model="dialogOperatorVisible" width="600px" top="4vh" append-to-body>
    <el-form ref="checkFormRef" :rules="rules" :model="operatorForm" label-width="auto" style="max-width: 600px">
      <el-form-item label="选择部门" prop="orgId">
        <MTreeSelect v-model="operatorForm.orgId" placeholder="请选择" :data="orgData" :fields="{
          value: 'deptId',
          label: 'deptName',
          children: 'children'
        }" style="width: 100%" :check-strictly="true" />
        <!-- <el-tree-select v-model="operatorForm.org" :data="orgData" filterable style="width: 100%" /> -->
      </el-form-item>
      <el-form-item label="选择人员" prop="approveNext">
        <el-select filterable style="width:100%;" v-model="operatorForm.approveNext" placeholder="请选择人员">
          <el-option :label="item.nickName" :value="item.userId" v-for="item in personData" />
        </el-select>
      </el-form-item>
    </el-form>
    <div style="margin-top: 30px; text-align: center">
      <el-button type="plain" @click="toCloseOperator()">关闭</el-button>
      <el-button type="primary" @click="submitOperatorForm(checkFormRef)" :loading="saveLoad">提交<i
          class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { useUserStore } from '@/store'
import { fields, modelValue } from './config'
import { getCheckOrgList, toOperator } from '@/api/yearCheck/index'
import { getList, getTree, deptTreeInfoAll } from '@/api/systemSetting/personnel'
import { } from '@/api/systemSetting/personnel'

import { Right, Stamp, Download, Operation } from '@element-plus/icons-vue'
import checkST from './components/checkST/checkST.vue'
import checkMF from './components/checkMF/checkMF.vue'
import checkStep from './components/checkStep.vue'
import result from './components/result.vue'
import checkOpinion from './components/checkOpinion.vue'
import { ElMessage } from 'element-plus'

const userStore = useUserStore();
const user = userStore.userInfo;

const tableData = ref([])
const orgData = ref([])
const personData = ref([])
const operatorForm = reactive({
  orgId: '',
  approveNext: '',
  id: ''
})

// 搜索
const params = ref<any>({
  pageSize: 10,
  pageNum: 1,
})

const dialogCheckVisible = ref(false) //审核
const openPress = ref(false) //查看审核进度
const dialogResultVisible = ref(false) //审核结果
const dialogOperatorVisible = ref(false) //选中经办人
const dialogResultOpinionVisible = ref(false) //审核意见
const isSt = ref(false) //判断明非社团
let chooseRow = ref({}) //
const checkKey = ref(1);
const checkKey2 = ref(1);
let total = ref() //总页
const checkFormRef = ref()
const rules = reactive({
  // orgId: [
  //   {
  //     required: true,
  //     trigger: 'blur',
  //     message: '请选择'
  //   }
  // ],
  approveNext: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择'
    }
  ]
})

watch(
  () => operatorForm.orgId,
  (val) => {
    getPersonList(val)
  }
)

onMounted(() => {
  // console.log(user)

  // deptTreeInfoAll().then((res: any) => {
  //   orgData.value = res.data[1].children[2].children[0].children[0]
  //   console.log(res.data[1].children[2].children[0].children[0])
  // })
})

const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
  getCheckOrgList(params.value).then(res => {
    const { data } = res
    tableData.value = data
    total.value = res.total
  })
}
search(modelValue)

const handleCheck = (row) => {
  checkKey.value += 1;
  checkKey2.value += 1;
  isSt.value = row.organizationType == 1 ? true : false;
  chooseRow.value = Object.assign({}, row)
  dialogCheckVisible.value = true
}

const getDeptTree = (parentId) => {
  getTree({ parentId }).then((res: any) => {
    orgData.value = res.data
  })
}

//管理员指派给经办人
const assignOperator = (row) => {
  operatorForm.id = row.id
  getDeptTree(row.supervisoryCode)
  getPersonList(row.supervisoryCode)
  dialogOperatorVisible.value = true
}
//关闭管理员指派给经办人
const closeAssignOperator = () => {
  operatorForm.orgId = ''
  operatorForm.id = ''
  operatorForm.approveNext = ''
  dialogOperatorVisible.value = false
}
const handleWatch = (row) => {
  chooseRow.value = row
  openPress.value = true
}
const closeAllPop = () => {
  dialogResultVisible.value = false
  dialogResultOpinionVisible.value = false
  dialogCheckVisible.value = false
}
const checkSubmit = () => {
  dialogResultVisible.value = true
}
const openCheckOpinion = () => {
  dialogResultOpinionVisible.value = true
}
//关闭审核
const closeRes = () => {
  dialogResultVisible.value = false
}
//关闭审核
const toCloseOperator = () => {
  dialogOperatorVisible.value = false
}
//保存审核
const saveSuccess = () => {
  dialogResultVisible.value = false
  dialogCheckVisible.value = false
  search(modelValue)
}
//选择部门查人
const getPersonList = (deptId) => {
  operatorForm.approveNext = ''
  getList({ deptId, pageSize: 10000, pageNum: 1 }).then(res => {
    personData.value = res.rows
  })
}
const submitOperatorForm = (formEl) => {
  formEl.validate((valid, fields) => {
    if (valid) {
      toOperator({ approveNext: operatorForm.approveNext, id: operatorForm.id }).then(res => {
        ElMessage({
          message: '审核提交成功',
          type: 'success'
        })
        closeAssignOperator()
        search(modelValue)
      })
    }
  })
}

const handleCurrentChange = () => {
  search(modelValue)
}

</script>
<style lang="scss" scoped>
.tree-box {
  position: relative;

  .nodeBox {
    width: 100%;
    height: 80vh;
    overflow-x: auto;
    cursor: all-scroll;
  }

  .showLevel {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.btns {
  display: flex;
  flex-direction: reverse;
  margin-bottom: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-12 {
  margin-left: 12px;
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 30px;
}

.check-step {
  color: #0fbb21;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &.no-check {
    color: #909399
  }
}
</style>
